<template>
	<view>
		<cu-custom :isBack="true" :bgColor="'bg-'+theme">
			<block slot="backText"></block>
			<block slot="content"><text>{{title}}</text></block>
		</cu-custom>
		<view class="whole-box">
			<view class="info-box">
				<view class="data-box">
					<text class="name">今日分润</text>
					<text class="number">888</text>
				</view>
				<view class="data-box">
					<text class="name">分润总额</text>
					<text class="number">888</text>
				</view>
				<view class="data-box">
					<text class="name">昨日分润</text>
					<text class="number">888</text>
				</view>
			</view>
			
			<view class="list">
				<scroll-view scroll-y :style="'height:'+scrollHeight+'px'" @scrolltolower="getMore">
					<view class="item" v-for="(item,index) in list" :key="index" >
						<view class="left-box">
							<view class="title">{{item.title}}</view>
							<view class="time">{{$common.timeFormat(item.created_at)}}</view>
							<view class="order-sn">订单编号：{{item.order_sn}}</view>
							<view class="price">拼中金额：{{item.price}}</view>
						</view>
						<view class="num up" >+{{item.num}}</view>
					</view>
					<view class="cu-load margin-center" :class="loading?'loading':'over'"></view>
				</scroll-view>
			</view>	
		</view>
	</view>	
</template>

<script>
	export default {
		components: {},
		mounted() {
			this.getScrollH()
		},
		data() {
			return {
				theme: this.$config.THEME(),
				title: '今日分润',
				list: [
					{
						id: 1,
						title: '（广州白云区）拼中订单：至臻面膜',
						order_sn: '1100579011549887813',
						created_at: 124235345,
						price: 99,
						num: 10,
					},
					{
						id: 2,
						title: '（广州白云区）拼中订单：至臻面膜',
						order_sn: '1100579011549887813',
						created_at: 124235345,
						price: 999,
						num: 100,
					},
					{
						id: 3,
						title: '（广州白云区）拼中订单：至臻面膜',
						order_sn: '1100579011549887813',
						created_at: 124235345,
						price: 9999,
						num: 1000,
					},
					
				],
				page: 1,
				hasMore: true,
				loading: false,
				
				scrollHeight: 100,
			}
		},
		onLoad(options) {
			
		},
		onShow() {
			// if (this.$common.loginAuth(true)) {
			// 	this.$nextTick((r) => {
			// 		uni.startPullDownRefresh({})
			// 	})
			// }
		},
		methods: {
			getScrollH() {
				let sys = uni.getSystemInfoSync();
				let winHeight = sys.screenHeight;
				//console.log(winHeight)
				let _this = this
				// 计算scroll-view高度
				let query = uni.createSelectorQuery().in(_this);
				query.select('.info-box').boundingClientRect()
				query.selectViewport()
				query.exec(function(res) {
					//console.log(res)
					_this.scrollHeight = winHeight - res[0].bottom
				})
			},
			getInfo() {
				this.$http
					.get('integral_info', {})
					.then((response) => {
						
					})
					.catch((response) => {
						console.log(response)
					})
			},
			getList() {
				if (this.hasMore) {
					this.loading = true
					this.$http
						.get('integral_details', {
							page: this.page,
						})
						.then((response) => {
							let list = this.list
							if (response.data.data.length > 0) {
								list = list.concat(response.data.data)
							} else {
								this.hasMore = false
							}
							this.list = list
							this.page += 1
							this.loading = false
							uni.stopPullDownRefresh()
						})
						.catch((response) => {
							console.log(response)
							this.loading = false
							uni.stopPullDownRefresh()
						})
				}
			},
			getMore() {
				this.getList()
			},
		},
		onPullDownRefresh() {
			this.getInfo()
			this.list = []
			this.page = 1
			this.hasMore = true
			this.loading = false
			this.getList()
		},
	}
</script>

<style>
	.info-box{
		width: 100%;
		height: 200rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #F5DD5D;
	}
	.info-box .data-box{
		flex: 33.33% 0 0;
		flex-shrink: 0;
		height: 200rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.data-box .name{
		font-size: 34rpx;
		color: #3C3A3A;
	}
	.data-box .number{
		margin-top: 24rpx;
		font-size: 44rpx;
		font-weight: bold;
		color: #000000;
	}
	
	.list .item{
		margin-top: 8rpx;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #FFFFFF;
	}
	.item .left-box{
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: space-between;
	}
	.left-box .title{
		width: 	550rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #3C3A3A;
		overflow: hidden;    
		text-overflow:ellipsis;    
		white-space: nowrap;
	}
	.left-box .time{
		margin-top: 20rpx;
		font-size: 22rpx;
		color: #5F5F5F;
		opacity: 0.84;
	}
	.left-box .order-sn{
		margin-top: 20rpx;
		font-size: 22rpx;
		color: #5F5F5F;
		opacity: 0.84;
	}
	.left-box .price{
		margin-top: 20rpx;
		font-size: 22rpx;
		color: #5F5F5F;
		opacity: 0.84;
	}
	.item .num{
		margin-left: 10rpx;
		font-size: 40rpx;
		font-weight: bold;
		color: #3C3A3A;
	}
	.item .num.up{
		color: #2A6843;
	}
	.item .num.down{
		color: #A21818;
	}
</style>
